<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark"><h1>当前用户:{{name}}</h1></div>
      </el-col>
    </el-row>
    <p></p>
    <el-button class="req" type="primary" size="medium" @click="deplayProcess">流程部署</el-button>
    <el-button class="req" type="primary" size="medium" @click="apply">填写请假申请</el-button>
    <el-button class="req" type="primary" size="medium" @click="trace">查看流程图</el-button>

    <!-- 请假申请Form -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="80px">
        <el-form-item label="申请人">
          <el-input v-model="form.personal"></el-input>
        </el-form-item>

        <el-form-item label="请假天数">
          <el-input v-model="form.day"></el-input>
        </el-form-item>

        <el-form-item label="请假原因">
          <el-input type="textarea" v-model="form.reason"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">提 交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="请假流程图" :visible.sync="traceVisible">
      <img :src="image" alt="请假流程图" />
      <!-- <img id="showImg" src="http://localhost:8080/vacate/trace" /> -->
    </el-dialog>

    <!-- 获取提交的任务表格 -->
    <p></p>
    <el-button class="req" type="primary" size="medium" @click="MyTask">获取自己提交的任务(刷新)</el-button>
    <el-table border :data="MyTableData" style="width: 100%" :row-class-name="myTableRowClassName">
      <el-table-column prop="apply.personal" label="申请人"></el-table-column>
      <el-table-column prop="apply.day" label="请假天数"></el-table-column>
      <el-table-column prop="apply.reason" label="请假原因"></el-table-column>
      <el-table-column prop="apply.createDate" label="创建时间"></el-table-column>
      <el-table-column prop="apply.updateDate" label="编辑时间"></el-table-column>
      <el-table-column prop="apply.completeUser" label="审核人"></el-table-column>
      <el-table-column prop="apply.recordUser" label="记录人"></el-table-column>
      <el-table-column prop="apply.completeDate" label="处理时间"></el-table-column>
      <el-table-column prop="apply.recordDate" label="人事记录时间"></el-table-column>
      <el-table-column prop="apply.state" label="状态">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.apply.state == '任务完成' ? 'success' : 'info'"
            v
          >{{scope.row.apply.state}}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <hr />
    <!-- 项目组长获取任务表格 -->
    <p></p>
    <el-button
      class="req"
      type="danger"
      size="medium"
      @click="groupLeaderUnfinish"
    >项目组长获取任务(未完成)(刷新)</el-button>
    <el-table
      border
      :data="groupLeaderTableData"
      style="width: 100%"
      :row-class-name="myTableRowClassName"
    >
      <el-table-column prop="personal" label="申请人"></el-table-column>
      <el-table-column prop="day" label="请假天数"></el-table-column>
      <el-table-column prop="reason" label="请假原因"></el-table-column>
      <el-table-column prop="createDate" label="创建时间"></el-table-column>
      <el-table-column prop="updateDate" label="编辑时间"></el-table-column>
      <el-table-column prop="claimUser" label="认领人"></el-table-column>
      <el-table-column prop="claimDate" label="认领时间"></el-table-column>
      <el-table-column prop="tag" label="状态">
        <template slot-scope="scope">
          <el-tag type="info">{{scope.row.state}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="make" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            v-if="scope.row.claimUser==null"
            @click="groupLeadertaskClaim(scope.$index, scope.row)"
          >认领</el-button>
          <el-button
            size="mini"
            type="success"
            v-if="scope.row.claimUser!=null && scope.row.completeUser==null"
            @click="groupLeaderAgree(scope.$index, scope.row)"
          >同 意</el-button>
          <el-button
            size="mini"
            type="warning"
            v-if="scope.row.claimUser!=null && scope.row.completeUser==null"
            @click="groupLeaderRefuse(scope.$index, scope.row)"
          >拒 绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 项目经理获取任务表格 -->
    <hr />
    <el-button class="req" type="danger" size="medium" @click="managerUnfinish">项目经理获取任务(未完成)(刷新)</el-button>
    <el-table
      border
      :data="managerTableData"
      style="width: 100%"
      :row-class-name="myTableRowClassName"
    >
      <el-table-column prop="personal" label="申请人"></el-table-column>
      <el-table-column prop="day" label="请假天数"></el-table-column>
      <el-table-column prop="reason" label="请假原因"></el-table-column>
      <el-table-column prop="createDate" label="创建时间"></el-table-column>
      <el-table-column prop="updateDate" label="编辑时间"></el-table-column>
      <el-table-column prop="claimUser" label="认领人"></el-table-column>
      <el-table-column prop="claimDate" label="认领时间"></el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          <el-tag type="info">{{scope.row.state}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="make" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            v-if="scope.row.claimUser==null"
            @click="managertaskClaim(scope.$index, scope.row)"
          >认领</el-button>
          <el-button
            size="mini"
            type="success"
            v-if="scope.row.claimUser!=null && scope.row.completeUser==null"
            @click="managerAgree(scope.$index, scope.row)"
          >同 意</el-button>
          <el-button
            size="mini"
            type="warning"
            v-if="scope.row.claimUser!=null && scope.row.completeUser==null"
            @click="managerhandleRefuse(scope.$index, scope.row)"
          >拒 绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 人事获取任务表格 -->
    <hr />
    <el-button class="req" type="danger" size="medium" @click="personalUnfinish">人事获取任务(未完成)(刷新)</el-button>
    <el-table
      border
      :data="personalTableData"
      style="width: 100%"
      :row-class-name="myTableRowClassName"
    >
      <el-table-column prop="personal" label="申请人"></el-table-column>
      <el-table-column prop="day" label="请假天数"></el-table-column>
      <el-table-column prop="reason" label="请假原因"></el-table-column>
      <el-table-column prop="createDate" label="创建时间"></el-table-column>
      <el-table-column prop="updateDate" label="编辑时间"></el-table-column>
      <el-table-column prop="completeUser" label="审核人"></el-table-column>
      <el-table-column prop="recordClaimUser" label="认领人"></el-table-column>
      <el-table-column prop="completeDate" label="处理时间"></el-table-column>
      <el-table-column prop="recordClaimDate" label="认领时间"></el-table-column>
      <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
          <el-tag  type="info"  >{{scope.row.state}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="make" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            v-if="scope.row.recordClaimUser==null"
            @click="personaltaskClaim(scope.$index, scope.row)"
          >认领</el-button>
          <el-button
            size="mini"
            type="success"
            v-if="scope.row.recordClaimUser!=null && scope.row.recordUser==null"
            @click="personalAgree(scope.$index, scope.row)"
          >记录</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style>

.el-table .success-row {
  background: #f2f6fc;
}
</style>

<script>
export default {
  data() {
    return {
      groupLeaderTableData: [],
      managerTableData: [],
      personalTableData: [],
      MyTableData: [],
      name: window.localStorage.getItem("name"),
      dialogFormVisible: false,
      traceVisible: false,
      image: "",
      form: {
        personal: window.localStorage.getItem("name"),
        day: "",
        reason: ""
      }
    };
  },
  methods: {
    //流程部署
    deplayProcess() {
      this.$axios({
        method: "get",
        url: "http://localhost:8080/vacate/deployProcess"
      }).then(res => {
          this.$message(res.data);
      });
    },
    apply() {
      this.dialogFormVisible = true;
    },
    //提交申请表
    submit() {
      this.$axios({
        method: "post",
        url: "http://localhost:8080/vacate/start",
        data: {
          personal: this.form.personal,
          day: this.form.day,
          reason: this.form.reason
        }
      }).then(res => {
        if (res.data == "提交成功") {
          this.$message({
            message: res.data,
            type: "success"
          });
          this.dialogFormVisible = false;
          this.MyTask();
          if (this.form.day <= 7) {
            this.groupLeaderUnfinish();
          } else {
            this.managerUnfinish();
          }
        } else {
          this.$message.error(res.data);
        }
      });
    },

    //组长操作
    groupLeaderUnfinish() {
      this.$axios({
        method: "get",
        url: "http://localhost:8080/vacate/taskQuery",
        params: {
          assignee: "组长1"
        }
      }).then(res => {
        console.log(res.data);
        this.groupLeaderTableData = res.data;
      });
    },
    groupLeadertaskClaim(index, row) {
      console.log(index, row);
      this.$axios({
        method: "post",
        url: "http://localhost:8080/vacate/claim",
        data: {
          taskId: row.taskId,
          personal: row.personal,
          day: row.day,
          reason: row.reason,
          createDate: row.createDate,
          updateDate: row.updateDate,
          claimUser: "组长1",
          endNode: false
        }
      }).then(res => {
        this.$message(res.data);
        this.groupLeaderUnfinish();
      });
    },
    groupLeaderAgree(index, row) {
      console.log(index, row);
      this.$axios({
        method: "post",
        url: "http://localhost:8080/vacate/complete",
        data: {
          taskId: row.taskId,
          personal: row.personal,
          day: row.day,
          reason: row.reason,
          createDate: row.createDate,
          updateDate: row.updateDate,
          claimUser: row.claimUser,
          claimDate: row.claimDate,
          endNode: false,
          completeUser: "组长1"
        }
      }).then(res => {
        this.$message(res.data);
        this.MyTask();
        this.groupLeaderUnfinish();
        this.personalUnfinish();
      });
    },
    groupLeaderRefuse(index, row) {
      console.log(index, row);
      this.$message("暂未开发");
    },

    //经理操作
    managerUnfinish() {
      this.$axios({
        method: "get",
        url: "http://localhost:8080/vacate/taskQuery",
        params: {
          assignee: "经理1"
        }
      }).then(res => {
        console.log(res.data);
        this.managerTableData = res.data;
      });
    },
    managerAgree(index, row) {
      console.log(index, row);
      this.$axios({
        method: "post",
        url: "http://localhost:8080/vacate/complete",
        data: {
          taskId: row.taskId,
          personal: row.personal,
          day: row.day,
          reason: row.reason,
          createDate: row.createDate,
          updateDate: row.updateDate,
          claimUser: row.claimUser,
          claimDate: row.claimDate,
          endNode: false,
          completeUser: "经理1"
        }
      }).then(res => {
        this.$message(res.data);
        this.MyTask();
        this.personalUnfinish();
        this.managerUnfinish();
      });
    },
    managerRefuse(index, row) {
      console.log(index, row);
      this.$message("暂未开发");
    },

    managertaskClaim(index, row) {
      console.log(index, row);
      this.$axios({
        method: "post",
        url: "http://localhost:8080/vacate/claim",
        data: {
          taskId: row.taskId,
          personal: row.personal,
          day: row.day,
          reason: row.reason,
          createDate: row.createDate,
          updateDate: row.updateDate,
          claimUser: "经理1",
          endNode: false
        }
      }).then(res => {
        this.$message(res.data);
        this.managerUnfinish();
      });
    },

    //人事操作
    personalUnfinish() {
      this.$axios({
        method: "get",
        url: "http://localhost:8080/vacate/taskQuery",
        params: {
          assignee: "人事1"
        }
      }).then(res => {
        console.log(res.data);
        this.personalTableData = res.data;
      });
    },
    personaltaskClaim(index, row) {
      console.log(index, row);
      this.$axios({
        method: "post",
        url: "http://localhost:8080/vacate/claim",
        data: {
          taskId: row.taskId,
          personal: row.personal,
          day: row.day,
          reason: row.reason,
          completeUser: row.completeUser,
          completeDate: row.completeDate,
          createDate: row.createDate,
          updateDate: row.updateDate,
          recordClaimUser: "人事1",
          endNode: true
        }
      }).then(res => {
        this.$message(res.data);
        this.personalUnfinish();
      });
    },
    personalAgree(index, row) {
      console.log(index, row);
      this.$axios({
        method: "post",
        url: "http://localhost:8080/vacate/complete",
        data: {
          taskId: row.taskId,
          personal: row.personal,
          day: row.day,
          reason: row.reason,
          createDate: row.createDate,
          updateDate: row.updateDate,
          claimUser: row.claimUser,
          claimDate: row.claimDate,
          completeUser: row.completeUser,
          completeDate: row.completeDate,
          endNode: true,
          recordUser: "人事1"
        }
      }).then(res => {
        this.$message(res.data);
        this.MyTask();
        this.personalUnfinish();
      });
    },

    //提交的信息
    MyTask() {
      this.$axios({
        method: "get",
        url: "http://localhost:8080/vacate/myTaskQuery"
      }).then(res => {
        console.log(res.data);
        this.MyTableData = res.data;
      });
    },
    cancel(index, row) {
      console.log(index, row);
      this.$axios({
        method: "get",
        url: "http://localhost:8080/vacate/cancel",
        params: {
          taskId: row.taskId
        }
      }).then(res => {
        this.$message(res.data);
      });
    },

    //流程图
    trace() {
      this.traceVisible = true;
      this.$axios({
        method: "get",
        url: "http://localhost:8080/vacate/trace"
      }).then(res => {
        this.image = "data:image/png;base64," + res.data;
      });
    },

    //表格属性
    myTableRowClassName({ row, rowIndex }) {
      return "success-row";
    }
  }
};
</script>